<template>
    <div v-loading="loading" class="container">
      <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="0" class="demo-ruleForm">
  
        <p>大学名称</p>
        <el-form-item prop="title">
          <el-input v-model="formData.title" placeholder="请输入标题" size="medium" clearable />
        </el-form-item>
        <p>地区</p>
        <el-form-item prop="describeInfo">
          <el-cascader
            size="large"
            :options="regionData"
            v-model="selectedOptions">
          </el-cascader>
        </el-form-item>
        <p>地址</p>
        <el-form-item prop="describeInfo">
          <el-input v-model="formData.describeInfo" placeholder="请输入描述" size="medium" clearable />
        </el-form-item>
        <p>简介</p>
        <el-form-item prop="describeInfo">
          <el-input v-model="formData.describeInfo" placeholder="请输入描述" size="medium" clearable />
        </el-form-item>
        <p>标签</p>
        <el-form-item prop="describeInfo">
          <el-input v-model="formData.describeInfo" placeholder="请输入描述" size="medium" clearable />
        </el-form-item>
        <p>师资力量</p>
        <el-form-item prop="describeInfo">
          <el-input v-model="formData.describeInfo" placeholder="请输入描述" size="medium" clearable />
        </el-form-item>
        <p>背景图</p>
        <el-form-item>
          <el-upload
            v-loading="img_loading"
            class="avatar-uploader el-upload"
            action="https://jsonplaceholder.typicode.com/posts/"
            :http-request="(params)=>uploadRequest(params,'bgImgUrl')"
            :show-file-list="false"
          >
            <img v-if="formData.bgImgUrl" :src="formData.bgImgUrl" class="avatar">
            <div v-else class="upload-text">选择封面图片</div>
          </el-upload>
        </el-form-item>
        <p>校徽</p>
        <el-form-item>
          <el-upload
            v-loading="img_loading"
            class="avatar-uploader el-upload"
            action="https://jsonplaceholder.typicode.com/posts/"
            :http-request="(params)=>uploadRequest(params,'emblem')"
            :show-file-list="false"
          >
            <img v-if="formData.emblem" :src="formData.emblem" class="avatar">
            <div v-else class="upload-text">选择封面图片</div>
          </el-upload>
        </el-form-item>
        <p>教师照片</p>
        <el-form-item>
          <el-image fit="cover" lazy :preview-src-list="teacherPhotos" class="t_img" v-for="(item,index) in teacherPhotos" :key="index" :src="item"></el-image>
          <el-upload
            v-loading="img_loading"
            class="avatar-uploader el-upload"
            action="https://jsonplaceholder.typicode.com/posts/"
            :http-request="(params)=>uploadRequest(params,'teacher')"
            :show-file-list="false"
          >
            <div class="upload-text">选择封面图片</div>
          </el-upload>
        </el-form-item>
        <!-- <p>内容</p>
        <el-form-item prop="content">
          <tinymce ref="ty" v-model="formData.content" :height="300" />
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" size="medium" :loading="submitLoading" @click="addNews()">{{$route.query.id ? '保存' : '新增'}}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script>
  import Tinymce from '@/components/Tinymce'
  import { uploadFile } from '@/api/admin.js'
  import {  getInfoById, addNews } from '@/api/web/school'
  import {
    provinceAndCityData,
    pcTextArr,
    regionData,
    pcaTextArr,
    codeToText,
  } from "element-china-area-data";
  export default {
    components: { Tinymce },
    data() {
      return {
        regionData,
        submitLoading: false,
        loading: false,
        formData: {},
        img_loading: false,
        teacherPhotos:[],
        selectedOptions:[],
        rules: {
          bannerImage: [{
            required: true,
            message: '请上传封面图片'
          }],
          content: [{
            required: true,
            message: '请输入新闻内容'
          }],
          title: [{
            required: true,
            message: '请输入新闻标题'
          }]
        }
      }
    },
    mounted() {
      if (this.$route.query.id) {
        this.getInfoById()
      }
    },
    methods: {
      getAuthor(e){
        getAuthor({page:1,limit:10,name:e}).then(res=>{
          if(res.code == 200){
            this.authorList = res.data.list
          }else{
            this.$message({
              type: 'error',
              message: res.message
            })
          }
        })
      },
      getInfoById() {
        this.loading = true
        getInfoById({ id: this.$route.query.id }).then(res => {
          this.loading = false
  
          if(res.data.smallLabelList && res.data.smallLabelList.length){
            res.data.smallLabelList.forEach(val=>{
              this.smallList.push(val.value)
            })
          }
          if (res.code == 200) {
            this.formData = {
              title: res.data.title,
              authorId: res.data.authorId,
              bannerImage: res.data.bannerImage,
              content: res.data.content,
              describeInfo: res.data.describeInfo,
              labelId: res.data.labelId.toString(),
              id: res.data.id,
            }
            this.content = res.data.content
            this.$refs.ty.destroyTinymce()
            this.$refs.ty.initTinymce()
          } else {
            this.$message({
              type: 'error',
              message: res.message
            })
          }
        })
      },
      addNews() {
        this.submitLoading = true
        addNews(this.formData).then(res => {
          this.submitLoading = false
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '提交成功'
            })
            this.$router.push({
              path: '/nft/article'
            })
          } else {
            this.$message({
              type: 'error',
              message: res.message
            })
          }
        })
      },
      uploadRequest(params,key) {
        this.img_loading = true
        uploadFile(params).then(res => {
          this.img_loading = false
          if (res && res.data && res.data.length) {
            if (key === 'teacher') {
              this.teacherPhotos.push(res.data[0])
            }else{
              this.$set(this.formData, key, res.data[0])
            }
          }
        })
      }
    }
  }
  </script>
  
  <style scoped>
  .avatar-uploader,.el-upload {
      border: 1px solid #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      width: 178px!important;
      height: 178px;
    }
    .avatar-uploader:hover,.el-upload:hover {
      border-color: #409EFF;
    }
    .upload-text {
      font-size: 14px;
      color: #8c939d;
      line-height: 178px;
      text-align: center;
      margin: 0 auto;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    .container{
      padding-bottom: 30px;
    }
    .t_img{
      display: inline-block;
      width: 178px;
      height: 178px;
      margin-right: 12px;
      margin-top: 12px;
    }
  </style>
  <style>
    .demo-ruleForm .el-input,.demo-ruleForm .el-select{
      width: 300px;
    }
  </style>
  